<template>
	<view class="page">
		<view class="order" v-for="order in orderList" :key="order.id">
			<view class="line-1">
				<text> 订单号：{{order.code}}</text>
				<text>{{order.status}}</text>
			</view>
			<view class="line-2">
				<text>mackbook pro 14英寸</text>
			</view>
			<view class="line-3">
				<text>价格: {{order.amount}}</text>
				<button class="pay-btn" type="primary" v-if="order.status=='未付款'"
				@tap="pay(order.id)">付款</button>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderList:[]
			}
		},
		methods: {
			pay(id){
				let that = this;
				uni.request({
					url:that.url.mircoPayOrder,
					method:"POST",
					data:{
						"orderId":id,
					},
					header:{
						"token":uni.getStorageSync("token"),
					},
					success(res){
						console.log("pay-res=====>"+res.data);
						let timeStamp = res.data.timeStamp;
						let nonceStr = res.data.nonceStr;
						let paySign = res.data.paySign;
						let pk = res.data.package;
						console.log("package:"+pk);
						console.log("nonceStr:"+nonceStr);
						console.log("paySign:"+paySign);
						console.log("timeStamp:"+timeStamp);
						//小程序向微信支付平台发送请求验证支付的正确性，如果正确会返回支付的页面(支付二维码),支付成功后进入success函数
						uni.requestPayment({
							"timeStamp":timeStamp,
							"nonceStr":nonceStr,
							"paySign":paySign,
							"package":pk,
							"signType":"MD5",
							success(res){
								uni.showToast({
									title:"支付成功"
								})
								//用户支付成功之后，小程序向后端商户系统发送请求，让商户系统主动查询支付订单结果
								uni.request({
									url:that.url.activeQueryOrder,
									method:"POST",
									header:{
										"token":uni.getStorageSync("token")
									},
									data:{
										"orderId":id
									},
									//成功之后刷新当前页面
									success(res){
										//getCurrentPages()方法获取所有页面
										let pages = getCurrentPages()
										//当前页面是最后一个
										let page = pages[pages.length - 1]
										page.onShow()
									},
									fail(res){
										console.log("修改订单状态失败=====>"+id)
									}
								})
							},
							fail(res){
								uni.showToast({
									title:"支付失败"
								})
							}
						})
					},
				})
			}
			
		},
		onShow(){
			let that = this
			let token = uni.getStorageSync("token")
			console.log("toekn:=>>>>>>"+token)
			uni.request({
				"url":that.url.userOrderList,
				"method":"POST",
				"data":{
					"pageNum":1,
					"pageSize":20
				},
				"header":{
					"token":uni.getStorageSync("token")
				},
				success(res){
					console.log(res)
					let list = res.data.list
					for(let order of list){
						if(order.status ===1){
							order.status = "未付款"
						}else if(order.status ===2){
							order.status = "已付款"
						}else if(order.status ===3){
							order.status = "已发货"
						}else if(order.status ===4){
							order.status = "已签收"
						}
					}
					that.orderList = list
				},
				fail(res){
					console.log(res)
				}
				
			})
		}
	}
</script>

<style>
	.page{
		padding: 10rpx;
	}
	.order{
		padding: 10px;
		border-bottom: solid 1px #e0e0e0;
		font-size: 16px;
	}
	.line-1{
		display: flex;
		justify-content: space-between; 
		padding-bottom: 5px;
	}
	.line-2{
		padding-bottom: 5px;
	}
	.line-3{
		display: flex;
		justify-content: space-between;
		align-items: baseline;
	}
	.pay-btn{
		margin: 0;
		font-size: 14px;
		line-height: 2;
	}
</style>
